import { useState, useEffect, useCallback, useRef } from "react";
import {
	Modal,
	Alert,
	Tabs,
	Form,
	Select,
	DatePicker,
	Row,
	Col,
	Radio,
	Input,
	Button,
	Upload,
	Card,
	Switch,
	Drawer,
	Space,
	message
} from "antd";
import { DeleteOutlined, FormOutlined, SettingTwoTone, FolderOpenTwoTone } from "@ant-design/icons";
import SetItem from "../../SetItem";
import { CommonModal, useModal } from "@/views/components/CommonModal";
import { SearchCheckboxTable } from "@/views/components/SearchTable/index";
import { useTableConfig } from "@/views/components/SearchTable/hooks/useTableConfig";
import useColumns from "./cloumns";
import { getGoodsSpuPage, getGoodsSkuPage } from "../../../service";

import GoodsMatchDrawer from "../GoodsMatchDrawer";

const UnmatchedSupplierProductsModal = props => {
	const { isSkuType, onCancel, handle } = props;
	const fn = useRef(null);
	const [visibleGoodsMatchDrawer, setVisibleGoodsMatchDrawer] = useState(false);
	const [goodsMatchDrawerProps, setGoodsMatchDrawerProps] = useState({
		onCancel: () => {
			setVisibleGoodsMatchDrawer(false);
		},
		refresh: () => {
			setTimeout(() => {
				fn.current && fn.current();
			}, 500);
		},
		defaultTab: "供应商匹配",
		data: [],
		isSkuType
	});
	const renderAction = useCallback(
		record => {
			return (
				<div className="flex" style={{ alignItems: "center" }}>
					{isSkuType && (
						<Button
							type="link"
							onClick={() => {
								setGoodsMatchDrawerProps(pre => {
									return { ...pre, defaultTab: "精准匹配", data: [{ skuId: record.id }] };
								});
								setVisibleGoodsMatchDrawer(true);
							}}
						>
							精准匹配
						</Button>
					)}

					{isSkuType && (
						<Button
							type="link"
							onClick={() => {
								setGoodsMatchDrawerProps(pre => {
									return { ...pre, defaultTab: "单个商品的智能匹配", data: [{ ...record, skuId: record.id }] };
								});
								setVisibleGoodsMatchDrawer(true);
							}}
						>
							智能匹配
						</Button>
					)}
					{!isSkuType && (
						<Button
							type="link"
							onClick={() => {
								setGoodsMatchDrawerProps(pre => {
									return {
										...pre,
										defaultTab: "智能匹配",
										data: [{ spuId: record.id, spuImage: record.image, spuName: record.spuName }],
										isSkuType
									};
								});
								setVisibleGoodsMatchDrawer(true);
							}}
						>
							智能匹配
						</Button>
					)}
					{!isSkuType && (
						<Button
							type="link"
							onClick={() => {
								setGoodsMatchDrawerProps(pre => {
									return {
										...pre,
										defaultTab: "高级匹配",
										data: [{ spuId: record.id, spuImage: record.image, spuName: record.spuName }],
										isSkuType
									};
								});
								setVisibleGoodsMatchDrawer(true);
							}}
						>
							高级匹配
						</Button>
					)}
					<Button
						type="link"
						onClick={() => {
							setGoodsMatchDrawerProps(pre => {
								const data = isSkuType ? [{ skuId: record.id }] : [{ spuId: record.id }];

								return { ...pre, defaultTab: "供应商匹配", data, isSkuType };
							});
							setVisibleGoodsMatchDrawer(true);
						}}
					>
						供应商匹配
					</Button>
				</div>
			);
		},
		[isSkuType]
	);

	const { columns } = useColumns({ ...props, renderAction });
	// 接口
	const tableRequest = isSkuType ? getGoodsSkuPage : getGoodsSpuPage;
	const tableKey = "UnmatchedSupplierProductsTableModal";
	const {
		selectedKeys,
		selectedRows,
		fetchList,
		dataSource,
		form,
		query,
		pagination,
		updateDataSource,
		updateSearchQuery,
		updatePaginationParams,
		searchSimpleTableProps
	} = useTableConfig({
		tableKey,
		rowKey: "id",
		//
		columns,
		tableRequest,
		autoFetch: true,
		hasPagination: true,
		hasQuickSearch: true,
		beforeQuerySearch: ({ API_DATA }) => {
			return {
				...API_DATA,
				matchOrNot: 0, // 供应商未匹配
				type: isSkuType ? 1 : null // 非组合商品
			};
		},
		resetSourceData: false,
		hasColsSetting: false
	});

	useEffect(() => {
		fn.current = () => {
			fetchList(query);
		};
	}, [isSkuType, query]);

	function checkSelected(callBack) {
		if (selectedKeys.length === 0) {
			message.warning("请勾选商品");
			return;
		}
		callBack && callBack();
	}

	return (
		<CommonModal
			className="views-table-dialog"
			title={{ title: "未匹配供应商商品" }}
			open={true}
			width="80%"
			onCancel={props.onCancel}
			footer
		>
			<SearchCheckboxTable
				key={tableKey}
				leftBtns={
					<Button
						onClick={e => {
							checkSelected(() => {
								setGoodsMatchDrawerProps(pre => {
									const data = isSkuType ? selectedRows.map(e => ({ skuId: e.id })) : selectedRows.map(e => ({ spuId: e.id }));
									return { ...pre, defaultTab: "供应商匹配", data, isSkuType };
								});
								setVisibleGoodsMatchDrawer(true);
							});
						}}
					>
						供应商匹配
					</Button>
				}
				mounted={false}
				{...searchSimpleTableProps}
			/>

			{visibleGoodsMatchDrawer && <GoodsMatchDrawer {...goodsMatchDrawerProps} />}
		</CommonModal>
	);
};
export default UnmatchedSupplierProductsModal;
